<template>
  <div class="data-type-form-container">
    <el-form
      ref="form"
      :model="form"
      label-position="top"
      style="max-width: 450px; min-width: 420px"
    >
      <!-- 下拉更换数据类型 -->
      <el-form-item>
        <el-select
          v-model="form.dataType"
          style="width: 100%"
          :class="[form.dataType ? form.dataType + '-text' : '']"
          @change="handleChangeDataType"
        >
          <el-option-group
            v-for="group in typeOptions"
            :key="group.label"
            :label="group.label"
          >
            <el-option
              v-for="item in group.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <!-- 必需/允许NULL/废弃 -->
      <el-form-item>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="5" v-if="!currentNodeInfo.root">
            必需<el-switch
              v-model="form.required"
              style="margin-left: 5px"
              :width="35"
              active-color="#409EFF"
              inactive-color="#c6c8cc"
            >
            </el-switch>
          </el-col>
          <el-col :span="7">
            允许NULL<el-switch
              v-model="form.allow_null"
              style="margin-left: 5px"
              :width="35"
              :disabled="currentNodeInfo.type == 'any'"
              active-color="#409EFF"
              inactive-color="#c6c8cc"
            >
            </el-switch>
          </el-col>
          <el-col :span="6">
            废弃<el-switch
              v-model="form.deprecated"
              style="margin-left: 5px"
              :width="35"
              active-color="#409EFF"
              inactive-color="#c6c8cc"
            >
            </el-switch>
          </el-col>
        </el-row>
      </el-form-item>
      <div class="hr-color"></div>
      <template v-if="form.dataType === 'string'">
        <el-form-item>
          <el-row :gutter="10" style="width: 100%; font-size: 12px">
            <el-col :span="6">
              枚举<el-switch
                v-model="form.isEnum"
                style="margin-left: 5px"
                :width="35"
                active-color="#409EFF"
                inactive-color="#c6c8cc"
                @change="handleChangeEnum"
              >
              </el-switch>
            </el-col>
            <el-col :span="18" style="display: flex; align-items: center">
              常量<el-switch
                v-model="form.isConst"
                style="margin-left: 5px"
                :width="35"
                active-color="#409EFF"
                inactive-color="#c6c8cc"
                @change="handleChangeConst"
              >
              </el-switch>
              <el-input
                v-if="form.isConst"
                v-model="form.const"
                placeholder="常量值"
                style="width: 75%; margin-left: 5px"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item v-if="form.isEnum" label="">
          <el-table
            class="enum-table"
            :data="form.enum"
            border
            :cell-style="{ height: '26px' }"
            style="width: 100%"
          >
            <el-table-column label="" width="35">
              <template slot-scope="scope">
                <img
                  v-if="scope.$index != form.enum.length - 1"
                  src="/images/sort.svg"
                  alt=""
                  style="width: 20px; height: 20px; cursor: move"
                />
              </template>
            </el-table-column>
            <el-table-column prop="value" label="枚举值">
              <template slot-scope="scope">
                <el-input
                  class="enum-input"
                  v-model="scope.row.value"
                  placeholder="枚举值"
                  @input="addEnumRow(scope.$index, scope.row)"
                ></el-input>
                <img
                  slot="reference"
                  v-if="scope.row.value != 0 && scope.row.value == ''"
                  src="/images/error.svg"
                  alt=""
                  title="不能为空"
                  style="width: 12px; height: 12px; cursor: pointer"
                />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称">
              <template slot-scope="scope">
                <el-input
                  class="enum-input"
                  v-model="scope.row.name"
                  placeholder="名称"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="说明">
              <template slot-scope="scope">
                <el-input
                  class="enum-input"
                  v-model="scope.row.description"
                  placeholder="说明"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="" width="50">
              <template slot-scope="scope">
                <img
                  v-if="scope.$index != form.enum.length - 1"
                  src="/images/node-delete.svg"
                  alt=""
                  title="删除"
                  style="width: 15px; height: 15px; cursor: pointer"
                  @click="deleteEnumRow(scope.$index, scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="format">
              <el-popover
                ref="formatRef"
                popper-class="common-popover scroll-popover"
                placement="bottom"
                title=""
                trigger="click"
                :visible-arrow="false"
              >
                <div
                  class="menu-item"
                  v-for="item in format_options.string_format_options"
                  :key="item.value"
                  @click="handleFormatClick(item)"
                >
                  <div class="menu-item-text">{{ item.label }}</div>
                </div>

                <el-input
                  slot="reference"
                  v-model="form.format"
                  placeholder=""
                  style="width: 100%"
                ></el-input
              ></el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行为">
              <el-select v-model="form.behavior" style="width: 100%">
                <el-option
                  v-for="item in behavior_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="最小长度">
              <el-input
                type="number"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                v-model.number="form.minLength"
                placeholder="> = 0"
                style="width: 100%"
                @change="handleChange($event, 'minLength')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大长度">
              <el-input
                type="number"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                v-model.number="form.maxLength"
                placeholder="> = 0"
                style="width: 100%"
                @change="handleChange($event, 'maxLength')"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="默认值">
              <el-input
                v-model="form.default"
                placeholder="默认值"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="pattern">
              <el-input
                v-model="form.pattern"
                placeholder="^[A-Za-z0-9-_]+"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="示例值">
          <el-input
            v-model="form.examples"
            placeholder="示例值"
            style="width: 100%"
          ></el-input>
        </el-form-item>
      </template>
      <template
        v-else-if="form.dataType === 'integer' || form.dataType === 'number'"
      >
        <el-form-item>
          <el-row :gutter="10" style="width: 100%; font-size: 12px">
            <el-col :span="6">
              枚举<el-switch
                v-model="form.isEnum"
                style="margin-left: 5px"
                :width="35"
                active-color="#409EFF"
                inactive-color="#c6c8cc"
                @change="handleChangeEnum"
              >
              </el-switch>
            </el-col>
            <el-col :span="18" style="display: flex; align-items: center">
              常量<el-switch
                v-model="form.isConst"
                style="margin-left: 5px"
                :width="35"
                active-color="#409EFF"
                inactive-color="#c6c8cc"
                @change="handleChangeConst"
              >
              </el-switch>
              <el-input
                v-if="form.isConst"
                v-model.number="form.const"
                placeholder="常量值"
                style="width: 75%; margin-left: 5px"
                @change="handleChange($event, 'const')"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item v-if="form.isEnum" label="">
          <el-table
            class="enum-table"
            :data="form.enum"
            border
            :cell-style="{ height: '26px' }"
            style="width: 100%"
          >
            <el-table-column label="" width="35">
              <template slot-scope="scope">
                <img
                  v-if="scope.$index != form.enum.length - 1"
                  src="/images/sort.svg"
                  alt=""
                  style="width: 20px; height: 20px; cursor: move"
                />
              </template>
            </el-table-column>
            <el-table-column prop="value" label="枚举值">
              <template slot-scope="scope">
                <el-input
                  class="enum-input"
                  v-model.number="scope.row.value"
                  style="width: 100%"
                  placeholder="枚举值"
                  @input="addEnumRow(scope.$index, scope.row)"
                ></el-input>
                <img
                  slot="reference"
                  v-if="scope.row.value != 0 && scope.row.value == ''"
                  src="/images/error.svg"
                  alt=""
                  title="不能为空"
                  style="width: 12px; height: 12px; cursor: pointer"
                />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称">
              <template slot-scope="scope">
                <el-input
                  class="enum-input"
                  v-model="scope.row.name"
                  placeholder="名称"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="说明">
              <template slot-scope="scope">
                <el-input
                  class="enum-input"
                  v-model="scope.row.description"
                  placeholder="说明"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="" width="50">
              <template slot-scope="scope">
                <img
                  v-if="scope.$index != form.enum.length - 1"
                  src="/images/node-delete.svg"
                  alt=""
                  title="删除"
                  style="width: 15px; height: 15px; cursor: pointer"
                  @click="deleteEnumRow(scope.$index, scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="format">
              <el-popover
                ref="formatRef"
                popper-class="common-popover scroll-popover"
                placement="right"
                title=""
                trigger="click"
                :visible-arrow="false"
              >
                <div
                  class="menu-item"
                  v-for="item in form.dataType === 'integer'
                    ? format_options.integer_format_options
                    : format_options.number_format_options"
                  :key="item.value"
                  @click="handleFormatClick(item)"
                >
                  <div class="menu-item-text">{{ item.label }}</div>
                </div>

                <el-input
                  slot="reference"
                  v-model="form.format"
                  placeholder=""
                  clearable
                  style="width: 100%"
                ></el-input
              ></el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行为">
              <el-select v-model="form.behavior" style="width: 100%">
                <el-option
                  v-for="item in behavior_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="默认值">
          <el-input
            v-model.number="form.default"
            style="width: 100%"
            placeholder="默认值"
            @change="handleChange($event, 'default')"
          ></el-input>
        </el-form-item>
        <el-form-item label="示例值">
          <el-input
            v-model.number="form.examples"
            style="width: 100%"
            placeholder="示例值"
            @change="handleChange($event, 'examples')"
          ></el-input>
        </el-form-item>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="8">
            <el-form-item label="最小值">
              <el-input
                v-model.number="form.minimum"
                placeholder="> = 0"
                style="width: 100%"
                @change="handleChange($event, 'minimum')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="最大值">
              <el-input
                v-model.number="form.maximum"
                placeholder="> = 0"
                style="width: 100%"
                @change="handleChange($event, 'maximum')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="倍数">
              <el-input
                v-model.number="form.multipleOf"
                placeholder="> = 0"
                style="width: 100%"
                @change="handleChange($event, 'multipleOf')"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="8"
            ><el-radio
              v-if="!form.minimum == false"
              v-model="form.equal_to_minimum"
              label="1"
              >不可等于最小值</el-radio
            ></el-col
          >
          <el-col :span="8"
            ><el-radio
              v-if="!form.maximum == false"
              v-model="form.equal_to_maximum"
              label="1"
              >不可等于最大值</el-radio
            ></el-col
          >
        </el-row>
      </template>
      <template v-else-if="form.dataType === 'boolean'">
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="默认值">
              <el-select v-model="form.default" style="width: 100%">
                <el-option
                  v-for="item in [
                    { label: 'true', value: true },
                    { label: 'false', value: false },
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行为">
              <el-select v-model="form.behavior" style="width: 100%">
                <el-option
                  v-for="item in behavior_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-else-if="form.dataType === 'array'">
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="最小元素个数">
              <el-input
                type="number"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                v-model.number="form.minItems"
                placeholder="> = 0"
                style="width: 100%"
                @change="handleChange($event, 'minItems')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大元素个数">
              <el-input
                type="number"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                v-model.number="form.maxItems"
                placeholder="> = 0"
                style="width: 100%"
                @change="handleChange($event, 'maxItems')"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="所有元素必须唯一">
              <el-switch
                v-model="form.uniqueItems"
                style="margin-left: 5px"
                :width="35"
                active-color="#409EFF"
                inactive-color="#c6c8cc"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行为">
              <el-select v-model="form.behavior" style="width: 100%">
                <el-option
                  v-for="item in behavior_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-else-if="form.dataType === 'object'">
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="最小属性数量">
              <el-input
                type="number"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                v-model.number="form.minProperties"
                placeholder="> = 0"
                style="width: 100%"
                @change="handleChange($event, 'minProperties')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大属性数量">
              <el-input
                type="number"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                v-model.number="form.maxProperties"
                placeholder="> = 0"
                style="width: 100%"
                @change="handleChange($event, 'maxProperties')"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="width: 100%; font-size: 12px">
          <el-col :span="12">
            <el-form-item label="行为">
              <el-select v-model="form.behavior" style="width: 100%">
                <el-option
                  v-for="item in behavior_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-else-if="form.dataType === 'quote'">
        <el-input v-model="filterText"> </el-input>
        <el-tree
          class="filter-tree"
          :data="treeList[0].children"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree"
        >
        </el-tree>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "DataTypeForm",
  data() {
    return {
      filterText: null,
      currentNodeInfo: {}, // 当前节点信息
      currentNodeParentInfo: {}, // 当前节点的父节点信息
      format_options: {}, // format的格式列表
      treeList: [], // 引用模型列表
      form: {
        dataType: null,
        required: false,
        allow_null: false,
        deprecated: false, // 废弃
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      typeOptions: [
        {
          label: "引用",
          options: [
            {
              label: "引用模型",
              value: "quote",
            },
          ],
        },
        {
          label: "基础类型",
          options: [
            {
              label: "string",
              value: "string",
            },
            {
              label: "integer",
              value: "integer",
            },
            {
              label: "boolean",
              value: "boolean",
            },
            {
              label: "array",
              value: "array",
            },
            {
              label: "object",
              value: "object",
            },
            {
              label: "number",
              value: "number",
            },
            {
              label: "null",
              value: "null",
            },
            {
              label: "any",
              value: "any",
            },
          ],
        },
        {
          label: "高级",
          options: [
            {
              label: "组合模式",
              value: "组合模式",
            },
            {
              label: "自定义",
              value: "自定义",
            },
          ],
        },
      ],
      behavior_options: [
        {
          label: "Read/Write",
          value: "RW",
        },
        {
          label: "Read Only",
          value: "R",
        },
        {
          label: "Write Only",
          value: "W",
        },
      ],
    };
  },
  methods: {
    init(node, data) {
      this.currentNodeInfo = data;
      this.currentNodeParentInfo = node.parent.data;
      this.treeList = this.$store.getters.data_model_tree_data;
      this.format_options = this.$store.getters.format_options;
      this.initForm(this.currentNodeInfo, this.currentNodeParentInfo);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 根据数据类型，初始化表单数据
    initForm(nodeInfo, parentNodeInfo) {
      this.form = {
        dataType: this.returnType(nodeInfo.type),
        required: nodeInfo.root
          ? false
          : !parentNodeInfo["required"]
          ? false
          : parentNodeInfo["required"].includes(nodeInfo.value),
        allow_null: Array.isArray(nodeInfo.type) ? true : false,
        deprecated: nodeInfo.deprecated ? nodeInfo.deprecated : false, // 废弃
      };
      switch (this.form.dataType) {
        case "string":
          this.form = {
            ...this.form,
            isEnum: this.currentNodeInfo.enum ? true : false, // 枚举
            enum: this.currentNodeInfo.enum
              ? this.currentNodeInfo["x-apifox-enum"]
              : [
                  {
                    value: null, // 枚举值
                    name: null, // 名称
                    description: null, // 说明
                  },
                ], // 枚举值
            isConst: this.currentNodeInfo.const ? true : false, // 常量
            const: this.currentNodeInfo.const
              ? this.currentNodeInfo.const
              : null, // 常量值
            format: this.currentNodeInfo.format
              ? this.currentNodeInfo.format
              : null, // format 格式
            behavior: this.currentNodeInfo.readOnly
              ? "R"
              : this.currentNodeInfo.writeOnly
              ? "W"
              : "RW", // 行为
            minLength: this.currentNodeInfo.minLength
              ? this.currentNodeInfo.minLength
              : null, // 最小长度
            maxLength: this.currentNodeInfo.maxLength
              ? this.currentNodeInfo.maxLength
              : null, // 最大长度
            default: this.currentNodeInfo.default
              ? this.currentNodeInfo.default
              : null, // 默认值
            pattern: this.currentNodeInfo.pattern
              ? this.currentNodeInfo.pattern
              : null, // 正则表达式
            examples: this.currentNodeInfo.examples
              ? this.currentNodeInfo.examples
              : null, // 示例值
          };
          this.$forceUpdate();
          break;
        case "integer":
        case "number":
          this.form = {
            ...this.form,
            isEnum: this.currentNodeInfo.enum ? true : false, // 枚举
            enum: this.currentNodeInfo.enum
              ? this.currentNodeInfo["x-apifox-enum"]
              : [
                  {
                    value: null, // 枚举值
                    name: null, // 名称
                    description: null, // 说明
                  },
                ], // 枚举值
            isConst: this.currentNodeInfo.const ? true : false, // 常量
            const: this.currentNodeInfo.const
              ? this.currentNodeInfo.const
              : null, // 常量值
            format: this.currentNodeInfo.format
              ? this.currentNodeInfo.format
              : null, // format 格式
            behavior: this.currentNodeInfo.readOnly
              ? "R"
              : this.currentNodeInfo.writeOnly
              ? "W"
              : "RW", // 行为
            minimum: this.currentNodeInfo.minimum
              ? this.currentNodeInfo.minimum
              : null, // 最小值
            maximum: this.currentNodeInfo.maximum
              ? this.currentNodeInfo.maximum
              : null, // 最大值
            equal_to_minimum: this.currentNodeInfo.exclusiveMinimum
              ? true
              : false, // 最小值是否排除
            equal_to_maximum: this.currentNodeInfo.exclusiveMaximum
              ? true
              : false, // 最大值是否排除
            default: this.currentNodeInfo.default
              ? this.currentNodeInfo.default
              : null, // 默认值
            multipleOf: this.currentNodeInfo.multipleOf
              ? this.currentNodeInfo.multipleOf
              : null, // 倍数
            examples: this.currentNodeInfo.examples
              ? this.currentNodeInfo.examples
              : null, // 示例值
          };
          this.$forceUpdate();
          break;
        case "boolean":
          this.form = {
            ...this.form,
            default: this.currentNodeInfo.default
              ? this.currentNodeInfo.default
              : null, // 默认值
            behavior: this.currentNodeInfo.readOnly
              ? "R"
              : this.currentNodeInfo.writeOnly
              ? "W"
              : "RW", // 行为
          };
          this.$forceUpdate();
          break;
        case "array":
          this.form = {
            ...this.form,
            minItems: this.currentNodeInfo.minItems
              ? this.currentNodeInfo.minItems
              : null, // 最小元素个数
            maxItems: this.currentNodeInfo.maxItems
              ? this.currentNodeInfo.maxItems
              : null, // 最大元素个数
            uniqueItems: this.currentNodeInfo.uniqueItems
              ? this.currentNodeInfo.uniqueItems
              : null, // 所有元素必须唯一
            behavior: this.currentNodeInfo.readOnly
              ? "R"
              : this.currentNodeInfo.writeOnly
              ? "W"
              : "RW", // 行为
          };
          this.$forceUpdate();
          break;
        case "object":
          this.form = {
            ...this.form,
            minProperties: this.currentNodeInfo.minProperties
              ? this.currentNodeInfo.minProperties
              : null, // 最小属性数量
            maxProperties: this.currentNodeInfo.maxProperties
              ? this.currentNodeInfo.maxProperties
              : null, // 最大属性数量
            behavior: this.currentNodeInfo.readOnly
              ? "R"
              : this.currentNodeInfo.writeOnly
              ? "W"
              : "RW", // 行为
          };
          this.$forceUpdate();
          break;
        case "null":
        case "any":
          break;
      }
    },
    // 获取type类型为数组的类型
    returnType(type) {
      return Array.isArray(type) ? (type.length == 2 ? type[0] : "any") : type;
    },
    // 当选择的数据类型发生变化后
    handleChangeDataType(val) {
      // this.initForm(val);
      // this.$emit("updateDataType", val, this.data);
    },
    // 当枚举的开关发生变化时
    handleChangeEnum(val) {
      if (val && this.form.isConst) {
        this.form.isConst = false;
      }
      this.form.const = null;
      this.form.enum = [
        {
          value: null, // 枚举值
          name: null, // 名称
          description: null, // 说明
        },
      ]; // 枚举值
    },
    // 当常量的开关发生变化后
    handleChangeConst(val) {
      if (val && this.form.isEnum) {
        this.form.isEnum = false;
      }
      this.form.const = null;
      this.form.enum = [
        {
          value: null, // 枚举值
          name: null, // 名称
          description: null, // 说明
        },
      ]; // 枚举值
    },
    // 新增一行枚举值
    addEnumRow(index, row) {
      // 当前输入框聚焦的时候，如若当前是最后一行，则新增一行枚举值
      if (index === this.form.enum.length - 1) {
        this.form.enum.push({
          value: null, // 枚举值
          name: null, // 名称
          description: null, // 说明
        });
      }
    },
    // 删除一行枚举值
    deleteEnumRow(index, row) {
      this.form.enum.splice(index, 1);
    },
    // 当点击format格式菜单后，赋值给format,并关闭当前格式的popover
    handleFormatClick(item) {
      this.form.format = item.value;
      this.$forceUpdate();
      this.$nextTick(() => {
        this.$refs["formatRef"].doClose();
      });
    },
    // 输入的数据类型为number的变量发生变化时
    handleChange(val, sign) {
      this.form[sign] = val == null || val == "" ? null : Number(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.data-type-form-container {
  width: 100%;
}
.menu-item {
  position: relative;
  height: 30px;
  .menu-item-text {
    height: 30px;
    line-height: 30px;
    color: #344054;
    font-size: 14px;
    box-sizing: border-box;
  }
}
.menu-item:hover {
  cursor: pointer;
  background-color: #f3f3f4;
  border-radius: 6px;
}
</style>
<style scoped>
.data-type-form-container >>> .el-form-item {
  margin-bottom: 6px;
  text-align: left;
}
.data-type-form-container >>> .el-form-item__label {
  font-size: 12px;
  line-height: 25px;
  font-weight: normal;
}
.data-type-form-container >>> .el-form--label-top .el-form-item__label {
  padding: 0;
}
.string-text >>> .el-input__inner {
  color: #139659;
}
.integer-text >>> .el-input__inner,
.number-text >>> .el-input__inner {
  color: #ee46bc;
}
.boolean-text >>> .el-input__inner {
  color: #f37acf;
}
.array-text >>> .el-input__inner {
  color: #17b26a;
}
.object-text >>> .el-input__inner {
  color: #2e90fa;
}
.null-text >>> .el-input__inner,
.dictionary-text >>> .el-input__inner {
  color: #ef6820;
}
.any-text >>> .el-input__inner {
  color: #69affb;
}
</style>